/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2018-07-03 09:58:51
 * @Description: Diagrams and Models 
 */
import React, { Component } from 'react';
import go from 'gojs';
import cat1 from './cat/cat1.png';
import cat2 from './cat/cat2.png';
import cat3 from './cat/cat3.png';

export default class App extends Component {
  componentDidMount() {
    const $ = go.GraphObject.make; // 构建 GOJS 对象
    var myDiagram = $(go.Diagram, 'chart',
      {
        'undoManager.isEnabled': true
      }
    )

    myDiagram.nodeTemplate =
      $(go.node, 'Horizontal',
        { background: '#44ccff' },
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: 'red' },
          new go.Binding('source')),
        $(go.TextBlock,
          'Default Text',
          { margin: 12, stroke: 'white', font: 'bold 16px sans-serif' },
          new go.Binding('text', 'name'))
      )

    var model = $(go.Model);

    model.nodeDataArray = [
      { name: "Don Meow", source: cat1 },
      { name: "Copricat", source: cat2 },
      { name: "Demeter", source: cat3 }
    ]

    myDiagram.model = model;


  }
  render() {
    return (
      <div id="chart" style={{ width: 800, height: 430, background: '#DAE4E4', margin: '20px auto' }} ref={e => this.chart = e}>

      </div>
    )
  }
}
